<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Block Designer</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="Paving Block System">
        <meta name="author" content="5 Stick">
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link href="css/bootstrap.css" rel="stylesheet">
        <style type="text/css">
            body {
                padding-top: 60px;
            }
        </style>
        <link href="css/bootstrap-responsive.css" rel="stylesheet">
        <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
        <!--[if lt IE 9]>
          <script src="js/html5shiv.js"></script>
        <![endif]-->
    </head>
    <body><div class="navbar navbar-inverse navbar-fixed-top">
            <div class="navbar-inner">
                <div class="container">
                    <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="brand" href="#">Paving Block System</a>
                    <div class="nav-collapse collapse">
                        <ul class="nav pull-right">
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Welcome 5-Sticks <b class="caret"></b></a>
                                <ul class="dropdown-menu">
                                    <li><a href="#">ข้อมูลส่วนตัว</a></li>
                                    <li><a href="#">เปลี่ยนรหัสผ่าน</a></li>
                                    <li class="divider"></li>
                                    <li><a href="#">ออกจากระบบ</a></li>
                                </ul>
                            </li>
                        </ul>
                        <ul class="nav">
                            <li class="dropdown active">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">โครงการ <b class="caret"></b></a>
                                <ul class="dropdown-menu">
                                    <li><a href="#">โครงการ</a></li>
                                    <li class="divider"></li>
                                    <li class="nav-header">บริหารจัดการลูกค้า</li>
                                    <li><a href="#">ลูกค้า</a></li>
                                </ul>
                            </li>
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">วัสดุ <b class="caret"></b></a>
                                <ul class="dropdown-menu">
                                    <li><a href="#">วัสดุ</a></li>
                                    <li class="divider"></li>
                                    <li class="nav-header">ข้อมูลอิฐบล็อค</li>
                                    <li><a href="#">รูปแบบอิฐบล็อค</a></li>
                                    <li><a href="#">อิฐบล็อค</a></li>
                                    <li><a href="#">แพทเทิร์นอิฐบล็อค</a></li>
                                </ul>
                            </li>
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">ประเภทการใช้งาน <b class="caret"></b></a>
                                <ul class="dropdown-menu">
                                    <li><a href="#">ประเภทการใช้งาน</a></li>
                                    <li class="divider"></li>
                                    <li class="nav-header">บริหารจัดการลูกค้า</li>
                                    <li><a href="#">ขั้นตอนการดำเนินงาน</a></li>
                                </ul>
                            </li>
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">พนักงาน <b class="caret"></b></a>
                                <ul class="dropdown-menu">
                                    <li><a href="#">พนักงาน</a></li>
                                    <li class="divider"></li>
                                    <li class="nav-header">วันทำงาน</li>
                                    <li><a href="#">วันทำงาน</a></li>
                                    <li><a href="#">วันหยุด</a></li>
                                    <li><a href="#">วันลาพนักงาน</a></li>
                                </ul>
                            </li>
                        </ul>
                    </div><!--/.nav-collapse -->
                </div>
            </div>
        </div>
        <div class="container">
            <div class="row">

                <div id="canvas" class="span6">

                    <div id="tools" class="row-fluid">
                        <div class="btn-group pull-left" data-toggle="buttons-radio">
                            <button id="btnMove" type="button" class="btn btn-primary"><i class="icon icon-move"></i></button>
                            <button id="btnEdit" type="button" class="btn btn-primary"><i class="icon icon-pencil"></i></button>
                            <button id="btnDelete" type="button" class="btn btn-primary"><i class="icon icon-trash"></i></button>
                        </div>
                        <div class="btn-group pull-left">
                            <button id="btnZoomIn" type="button" class="btn"><i class="icon icon-zoom-in"></i></button>
                            <button id="btnZoomOut" type="button" class="btn"><i class="icon icon-zoom-out"></i></button>
                        </div>
                    </div>
                    <div id="svgcanvas" style="height:300px;background-color: #EEEEEE;">
                    </div>
                </div>
                <div id="list" class="span6">
                </div>
            </div>
            <form class="form-actions">
                <input type="text" name="blockId" id="blockId" value="1" />
                <input type="text" name="txtPaving" id="txtPaving" value='[{"posX":"0","posY":"0","id":"63525fbb-f2e1-5de0-5c5f-0f7e02879458"},{"posX":"10","posY":"0","id":"56224689-498c-502e-d440-2963cfee4c42"},{"posX":"10","posY":"10","id":"47eb8045-e623-640b-bfce-dc3445834fcf"},{"posX":"0","posY":"10","id":"8c64d0b7-5580-aa29-28ff-3b8a401e5c1f"}]' />
                <button type="submit" class="btn">Save Change</button>
            </form>
        </div>
        <script id="tableTemplate" type="text/template">
            <h3>List</h3>
            <table id="tablePoint" class="table table-bordered">
                <thead>
                    <tr>
                        <th>X</th>
                        <th>Y</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody id="point-list"></tbody>
            </table>
            <button type="button" id="add-point" class="btn">Add Point</button>
        </script>
        <script id="pointTemplate" type="text/template">
        <td><input type="text" class="input-block-level posX" name="posX" value="<%=posX %>" /></td>
        <td><input type="text" class="input-block-level posY" name="posY" value="<%=posY %>" /></td>
        <td>
            <div class="btn-group">
                <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
                    Action
                    <span class="caret"></span>
                </a>
                <ul class="dropdown-menu">
                    <li><a class="move-up">Move Up</a></li>
                    <li><a class="move-down">Move Down</a></li>
                    <li><a class="destroy">Delete</a></li>
                </ul>
            </div>
        </td>
    </script>
    <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="js/underscore-min.js"></script>
    <script type="text/javascript" src="js/backbone-min.js"></script>
    <script type="text/javascript" src="js/backbone.localStorage-min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/raphael-min.js"></script>
    <script type="text/javascript" src="blockdesigner.js"></script>
    <!--script>
        var R;
        var $circles = [];
        var $txtLengths = [];
        var $curCircle;
        var $path;
        var BlockDesigner = function(){
            this.scale = 100;
            this.posX = 0;
            this.posY = 0;
            this.zoomIn = function(){
                this.setScale(this.scale*2);
            }
            this.zoomOut = function(){
                this.setScale(this.scale/2);
            }
            this.setScale = function(scale){
                this.scale = scale;
                console.log(scale);
            }
            this.setPos = function(posX, posY){
                this.posX = posX;
                this.posY = posY;
                console.log(posX, posY);
                this.renderStage();
            }
            this.renderStage = function(){
                console.log('render stage');
            }
        }
        var myBlockDesigner = new BlockDesigner();
        //init();
        $(document).ready(function(){
            R = Raphael("svgcanvas", "100%", "100%");
            $path = R.path('');
            $path.attr("fill", "#00ff01");
            console.log(window.screen.width);
            if (window.screen.width < 600) {
                $('#svgcanvas').bind('touchstart', function(e){
                    onMousedown(e.originalEvent.touches[0]);
                    e.preventDefault();
                });
                $('#svgcanvas').bind('touchend', function(e){
                    onMouseup(e.originalEvent.touches[0]);
                    e.preventDefault();
                });
                $('#svgcanvas').bind('touchmove',  function(e){
                    onMousemove(e.originalEvent.touches[0]);
                    e.preventDefault();
                });
            }else{
                $('#svgcanvas').bind('mousedown', onMousedown);
                $('#svgcanvas').bind('mouseup', onMouseup);
                $('#svgcanvas').bind('mousemove', onMousemove);
            }
        });
        function onMousedown(e){
            var offset = $('#svgcanvas').position();
            $curCircle = R.getElementByPoint(e.pageX, e.pageY);
            if($curCircle == undefined){
                var circle = R.circle(e.pageX - offset.left, e.pageY - offset.top, 10)
                .attr("fill", "#f00")
                .attr("stroke", "#f00")
                .attr("cursor", "pointer");
                $curCircle = circle;
                $circles.push($curCircle);
                moveObjsToTop($circles);
                var t = R.text($circles.length * 50, $circles.length * 50, "50 m.");
                $txtLengths.push(t);
                setStringPosAndValue($circles, $txtLengths);
            }
            if($circles.length >= 2){
                var $str_path = getStrPath($circles);
                $path.attr({"path": $str_path});
            }
        }
        function onMouseup(e){
            $curCircle = undefined;
            var $str_path = getStrPath($circles);
            $path.attr({"path": $str_path});
            setStringPosAndValue($circles, $txtLengths);
        }
        function onMousemove(e){
            var offset = $('#svgcanvas').position();
            if($curCircle){
                console.log(e);
                $curCircle.attr('cx', e.pageX - offset.left);
                $curCircle.attr('cy', e.pageY - offset.top);
                var $str_path = getStrPath($circles);
                $path.attr({"path": $str_path});
                setStringPosAndValue($circles, $txtLengths);
            }
        }
        function moveObjsToTop($arr){
            for(var i=0; i< $arr.length; i++){
                $arr[i].toFront();
            }
        }
        function getStrPath($arr){
            $retVal = 'M'+$arr[0].attr('cx')+' '+$arr[0].attr('cy');
            for(var i = 1; i< $arr.length; i++){
                $retVal += 'L'+$arr[i].attr('cx')+' '+$arr[i].attr('cy');
            }
            $retVal += 'L'+$arr[0].attr('cx')+' '+$arr[0].attr('cy');
            return $retVal;
        }
        function setStringPosAndValue($arrCircle, $arrText){
            for(var i = 1; i< $arrCircle.length; i++){
                setText($arrText[i],$arrCircle[i-1], $arrCircle[i]);
            }
            setText($arrText[0], $arrCircle[$arrCircle.length-1], $arrCircle[0]);
        }
        function setText($text, circle1, circle2){
            var lx = Math.abs(circle1.attr('cx')-circle2.attr('cx'));
            var ly = Math.abs(circle1.attr('cy')-circle2.attr('cy'));
            var length = Math.sqrt(lx*lx+ly*ly);
            $text.attr({'text':length+' m.'});
            $text.node.setAttribute("x",(circle1.attr('cx')+circle2.attr('cx'))/2);
            $text.node.setAttribute("y",(circle1.attr('cy')+circle2.attr('cy'))/2);
        }
        function touchHandler(event)
        {
            var touches = event.changedTouches,
            first = touches[0],
            type = "";
            switch(event.type)
            {
                case "touchstart":
                    type = "mousedown";
                    break;
                case "touchmove":
                    type="mousemove";
                    break;        
                case "touchend":
                    type="mouseup";
                    break;
                default:
                    return;
            }
            var simulatedEvent = document.createEvent("MouseEvent");
            simulatedEvent.initMouseEvent(type, true, true, window, 1, 
            first.screenX, first.screenY, 
            first.clientX, first.clientY, false, 
            false, false, false, 0/*left*/, null);

            first.target.dispatchEvent(simulatedEvent);
            event.preventDefault();
        }

        function init() 
        {
            document.addEventListener("touchstart", touchHandler, true);
            document.addEventListener("touchmove", touchHandler, true);
            document.addEventListener("touchend", touchHandler, true);
            document.addEventListener("touchcancel", touchHandler, true);    
        }
    </script-->
</body>
</html>
